*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    cursor: pointer;
}
html,body{
    width: 100%;
    height: 100%;
    background-color: #111f43;
}
body{
    min-width: 16rem;
    background-image: url("../images/background.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.top-area{
    position: relative;
    text-align: center;
}
.title{
    margin: 0 auto;
    width: 5.5rem;
    line-height: 10vh;
    letter-spacing: 0.1rem;
    background-image: url("../images/title-left.png"),url("../images/title-right.png");
    background-repeat: no-repeat no-repeat;
    background-position: 0 center,100% center;
}
.time{
    position: absolute;
    top: 0.25rem;
    right: 0.46rem;
}
.exit{
    position: absolute;
    bottom: 0.25rem;
    right: 0.46rem;
}
.chart-area{
    padding: 0 0.46rem;
    font-size: 0;
}
.tab{
    width: 4.64rem;
    height: 4.9vh;
    line-height: 4.9vh;
    font-size: 0;
    background-image: url("../images/tab-left.png"),url("../images/tab-right.png");
    background-repeat: no-repeat no-repeat;
    background-position: 0 center,100% center;
}
.tab span:first-child{
    width: 1.5rem;
    text-align: center;
}
.tab span:last-child{
    margin-left: 0.58rem;
    width: 1.5rem;
    text-align: center;
}
.middle{
    position: relative;
    height: 82vh;
}
.people-in-camp{
    position: absolute;
    left: 50%;
    top: 0.67rem;
    margin-left: -2.04rem;
    width: 4.08rem;
    height: 37.7vh;
}
.category-in-camp{
    position: absolute;
    left: 50%;
    bottom: 1.56rem;
    margin-left: -3.285rem;
    width: 6.57rem;
    height: 20vh;
}
.left{
    position:absolute;
    top:1.6rem;
    left:0.46rem;
    width: 30%;
}
.soldier{
    margin-top: 2.8vh;
}
.soldier-title{
    margin: 0 auto;
    padding-left: 0.6rem;
    width: 2.67rem;
    line-height: 0.26rem;
    background-image: url("../images/icon.png");
    background-repeat: no-repeat;
    background-size: 0.59rem 0.18rem;
    background-position: 0 center;
}
.soldier-chart{
    height: 31vh;
    background-image: url("../images/left-top-bg.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
}
.leader-status{
    margin-top: 2.8vh;
}
.leader-status-title{
    margin: 0 auto;
    padding-left: 0.6rem;
    width: 2.69rem;
    line-height: 0.26rem;
    background-image: url("../images/icon.png");
    background-repeat: no-repeat;
    background-size: 0.59rem 0.18rem;
    background-position: 0 center;
}
.leader-status-chart{
    padding: 0 0.34rem;
    height: 41vh;
    background-image: url("../images/left-bottom-bg.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
}
.leader-status-item{
    margin-top: 0.46rem;
    width: 1.94rem;
    height: 7.6vh;
    background-image: url("../images/status-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 0;
}
.leader-status-chart .leader-status-item:nth-of-type(even){
    float: right;
}
.status-box{
    width: 43.7%;
    height: 100%;
}
.status-box span::before{
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
}
.leader-info{
    margin-top: 0.75%;
    padding: 0.07rem 0.05rem;
    width: 56.3%;
    height: 86.2%;
}
.right{
    position:absolute;
    top:1.62rem;
    right:0.46rem;
    width: 30%;
}
.entry-exit-status{

}
.entry-exit-status-title{
    margin: 0 auto;
    padding-left: 0.6rem;
    width: 1.9rem;
    background-image: url("../images/icon.png");
    background-repeat: no-repeat;
    background-size: 0.59rem 0.18rem;
    background-position: 0 center;
}
.entry-exit-status-chart{
    padding: 0.53rem 0.28rem 0.28rem 0.28rem;
    height: 79.6vh;
    background-image: url("../images/right-bg.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
}
.entry-exit-status-chart>table{
    width: 100%;
    border-collapse:collapse;
}
.entry-exit-status-chart>table>thead{
    line-height: 0.56rem;
    background-color: #395dac;
}
.entry-exit-status-chart>table>tbody{
    line-height: 0.58rem
}
.entry-exit-status-chart>table>tbody tr:nth-of-type(even){
    background-color: #203474;
}
.entry-exit-status-chart>table>tbody tr:nth-of-type(odd){
    background-color: #182c5c;
}
